<template>
  <div class="login-container">
    <div class="form-container">
      <div class="form-tabs">
        <button 
          :class="{ active: activeTab === 'login' }" 
          @click="activeTab = 'login'"
        >
          登录
        </button>
        <button 
          :class="{ active: activeTab === 'register' }" 
          @click="activeTab = 'register'"
        >
          注册
        </button>
      </div>

      <!-- 登录表单 -->
      <form v-if="activeTab === 'login'" @submit.prevent="handleLogin" class="form">
        <div class="form-group">
          <label for="login-username">用户名</label>
          <input 
            id="login-username"
            v-model="loginForm.username" 
            type="text" 
            required
          >
        </div>
        <div class="form-group">
          <label for="login-password">密码</label>
          <input 
            id="login-password"
            v-model="loginForm.password" 
            type="password" 
            required
          >
        </div>
        <button type="submit" class="submit-btn">登录</button>
      </form>

      <!-- 注册表单 -->
      <form v-else @submit.prevent="handleRegister" class="form">
        <div class="form-group">
          <label for="register-username">用户名</label>
          <input 
            id="register-username"
            v-model="registerForm.username" 
            type="text" 
            required
          >
        </div>
        <div class="form-group">
          <label for="register-password">密码</label>
          <input 
            id="register-password"
            v-model="registerForm.password" 
            type="password" 
            required
          >
        </div>
        <div class="form-group">
          <label for="register-confirm">确认密码</label>
          <input 
            id="register-confirm"
            v-model="registerForm.confirmPassword" 
            type="password" 
            required
          >
        </div>
        <button type="submit" class="submit-btn">注册</button>
      </form>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
  name: 'Login',
  setup() {
    const store = useStore()
    const router = useRouter()
    const activeTab = ref('login')

    const loginForm = reactive({
      username: '',
      password: ''
    })

    const registerForm = reactive({
      username: '',
      password: '',
      confirmPassword: ''
    })

    const handleLogin = async () => {
      try {
        await store.dispatch('auth/login', {
          username: loginForm.username,
          password: loginForm.password
        })
        // 检查是否有重定向地址
        const redirect = router.currentRoute.value.query.redirect || '/'
        router.push(redirect)
      } catch (error) {
        alert('登录失败: ' + error.message)
        console.error('登录失败:', error)
      }
    }

    const handleRegister = async () => {
      if (registerForm.password !== registerForm.confirmPassword) {
        alert('两次输入的密码不一致')
        return
      }

      try {
        await store.dispatch('auth/register', {
          username: registerForm.username,
          password: registerForm.password
        })
        activeTab.value = 'login'
        alert('注册成功，请登录')
      } catch (error) {
        alert('注册失败: ' + error.message)
        console.error('注册失败:', error)
      }
    }

    return {
      activeTab,
      loginForm,
      registerForm,
      handleLogin,
      handleRegister
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: #0f1923;
}

.form-container {
  background-color: #1f2937;
  padding: 2rem;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-tabs {
  display: flex;
  margin-bottom: 2rem;
  border-bottom: 2px solid #374151;
}

.form-tabs button {
  flex: 1;
  padding: 1rem;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.3s;
}

.form-tabs button.active {
  color: #ff4655;
  border-bottom: 2px solid #ff4655;
  margin-bottom: -2px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  color: #e5e7eb;
  font-size: 0.9rem;
}

.form-group input {
  padding: 0.75rem;
  border: 1px solid #374151;
  border-radius: 4px;
  background-color: #374151;
  color: white;
  font-size: 1rem;
}

.form-group input:focus {
  outline: none;
  border-color: #ff4655;
}

.submit-btn {
  background-color: #ff4655;
  color: white;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #e6323f;
}
</style> 